<template>
  <div class="outerContainer">
    <div class="topContainer">
      <div class="topInsideContainer">
        <div class="address">
          <span>呼和浩特</span>
          <i class="icon iconfont icondown-triangle" style="font-size: 5px"></i>
        </div>
        <ul class="topNav">
          <li>
            <!-- <a href="">请登录</a> -->
            <router-link to="/login">请登录</router-link>
            <i
              class="icon iconfont icondown-triangle"
              style="fontsize: 5px"
            ></i>
            <em>/</em>
          </li>
          <li style="width: 50px">
            <!-- <a href="">注册</a> -->
            <router-link to="/register">注册</router-link>
            <!-- <i class="icon iconfont icondown-triangle"></i> -->
            <em>/</em>
          </li>
          <li class="gift">
            <i class="icon iconfont iconlipin" style="color: #f10180"></i>
            <span>签到有礼</span>
            <em>/</em>
            <div class="giftBox">
              <h1>请前往<i style="color: #f10180">唯品会App首页</i>签到哦</h1>
              <p>
                即日起，签到网页端入口将下线，请前往“唯品会APP首页-签到领券”继续参与签到活动。
              </p>
              <img
                src="//shop.vipstatic.com/img/common/header_signin-hash-670694db.png"
                alt=""
              />
              <div class="giftBoxBottom">
                <img
                  src="http://b.appsimg.com/upload/momin/2020/08/26/78/1598435695911.png"
                  alt=""
                />
                <div>也可以使用微信扫码签到哦</div>
              </div>
            </div>
          </li>
          <li class="sale">
            <a href="">我的特卖</a>
            <ul class="saleBox">
              <li>
                <a href="" style="margin-left: 14px">我的特卖 </a>
                <i class="iconfont iconxiangshangsanjiao"></i>
              </li>
              <li>
                <a href="">商品收藏 </a>
              </li>
              <li><a href="">品牌收藏</a></li>
              <li>
                <!-- <a href="">我的订单</a> -->
                <router-link to="/trade">我的订单</router-link>
              </li>
            </ul>
            <i
              class="icon iconfont icondown-triangle"
              style="fontsize: 5px"
            ></i>
            <em>/</em>
          </li>
          <li class="club">
            <a href="">会员俱乐部</a>
            <ul class="clubBox">
              <li>
                <a href="" style="margin-left: 14px">我的特卖 </a>
                <i class="iconfont iconxiangshangsanjiao"></i>
              </li>
              <li>
                <a href="">俱乐部首页 </a>
              </li>
              <li><a href="">唯品币兑换</a></li>
            </ul>
            <i
              class="icon iconfont icondown-triangle"
              style="fontsize: 5px"
            ></i>
            <em>/</em>
          </li>
          <li class="serve">
            <a href="">客服服务</a>
            <ul class="serveBox">
              <li>
                <a href="" style="margin-left: 14px">客服服务 </a>
                <i class="iconfont iconxiangshangsanjiao"></i>
              </li>
              <li>
                <a href="">联系客服 </a>
              </li>
              <li><a href="">帮助中心</a></li>
              <li><a href="">服务中心</a></li>
              <li>
                <a href="" style="margin-left: 25px; font-size: 12px"
                  >知识产权投诉</a
                >
              </li>
            </ul>
            <i
              class="icon iconfont icondown-triangle"
              style="fontsize: 5px"
            ></i>
            <em>/</em>
          </li>
          <li class="iphone">
            <i class="icon iconfont iconshouji" style="margin: 0 10px"></i>
            <span>手机版</span>
            <em>/</em>
            <div class="iphoneBox">
              <div class="iphoneTop">
                <i class="icon iconfont iconshouji" style="margin: 0 10px"></i>
                <span>手机版</span>
              </div>
              <div class="insde">
                <img
                  src="//b.appsimg.com/2016/06/17/863/1466134037230.jpg"
                  alt=""
                />
              </div>
            </div>
          </li>
          <li>
            <span>更多</span>
            <i
              class="icon iconfont icondown-triangle"
              style="fontsize: 5px"
            ></i>
          </li>
        </ul>
      </div>
    </div>
    <div class="indexContainer">
      <div class="logoSearch">
        <h1 class="logo">
          <router-link to="/home">
            <img
              src="http://b.appsimg.com/upload/momin/2020/06/16/82/1592278113502.png"
              alt=""
            />
          </router-link>
        </h1>
        <ul class="center">
          <li>
            <i class="icon iconfont icondunpai"></i>
            <span>100%正品</span>
          </li>
          <li>
            <i class="icon iconfont iconman88baoyou"></i>
            <span>88元包邮</span>
          </li>
          <li>
            <i class="icon iconfont icontiantuihuan"></i>
            <span>退还无忧</span>
          </li>
        </ul>
        <div class="right">
          <div class="topInput">
            <input
              type="text"
              placeholder="女式T恤"
              class="searchInput"
              v-model="keyword"
            />
            <div
              class="mockbutton iconfont iconmagnifier"
              @click="btnToSearch"
            ></div>
          </div>
          <ul class="bottomNav">
            <li>女式T恤</li>
            <li>手机</li>
            <li>女士休闲裤</li>
            <li>护肤套装</li>
            <li>耐克Nike</li>
            <li style="border-right: none">女士闲鞋</li>
          </ul>
        </div>
      </div>
      <div class="type-nav">
        <div class="container">
          <div @mouseenter="isShow = true" @mouseleave="isShow = false">
            <h2 class="all">商品分类</h2>
            <transition name="sort">
              <div class="sort" v-show="isShow">
                <div class="all-sort-list2" @click="toSearch">
                  <div
                    class="item"
                    v-for="(tm1, index) in catgrotlist"
                    :key="tm1.categoryId"
                    @mouseenter="moveIntem(index)"
                    :class="{ active: currentIndex === index }"
                  >
                    <h3>
                      <a
                        href="javascript:;"
                        :data-categoryName="tm1.categoryName"
                        :data-category1Id="tm1.categoryId"
                        >{{ tm1.categoryName }}</a
                      >
                    </h3>
                    <div class="item-list clearfix">
                      <div class="subitem">
                        <dl
                          class="fore"
                          v-for="(tm2, index) in tm1.categoryChild"
                          :key="tm2.categoryId"
                          :data-categoryName="tm2.categoryName"
                          :data-category2Id="tm2.categoryId"
                        >
                          <dt>
                            <a href="javascript:;">{{ tm2.categoryName }}</a>
                          </dt>
                          <dd>
                            <em
                              v-for="(tm3, index) in tm2.categoryChild"
                              :key="tm3.categoryId"
                            >
                              <a
                                href="javascript:;"
                                :data-categoryName="tm3.categoryName"
                                :data-category3Id="tm3.categoryId"
                                >{{ tm3.categoryName }}</a
                              >
                            </em>
                          </dd>
                        </dl>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </transition>
          </div>
          <nav class="nav">
            <a href="###">推荐</a>
            <a href="###">3折疯狂</a>
            <a href="###">唯品快抢</a>
            <a href="###">唯品奥莱</a>
            <a href="###">品牌清仓</a>
            <a href="###">女装</a>
            <a href="###">鞋包</a>
            <a href="###">美妆</a>
            <a href="###">电器</a>
            <a href="###">母婴</a>
            <a href="###">男装</a>
            <!-- <a href="###">更多</a> -->
          </nav>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import throttle from "lodash/throttle";
export default {
  name: "Header",
  data() {
    return {
      isShow: false,
      currentIndex: -1,
      keyword: "",
    };
  },
  mounted() {
    this.getCatgrotList();
    this.$bus.$on("removeKeyword", this.removeKeyword);
  },
  methods: {
    getCatgrotList() {
      this.$store.dispatch("getCatgrotList");
    },
    moveIntem: throttle(
      function (index) {
        // console.log(index);
        this.currentIndex = index;
      },
      20,
      { trailing: false }
    ),
    btnToSearch() {
      let location = {
        name: "search",
        params: {
          keyword: this.keyword || undefined,
        },
      };
      if (this.$route.query) {
        location.query = this.$route.query;
      }
      if(this.keyword){
        this.$router.push(location);
      }
      this.keyword=''
    },
    toSearch(event) {
      let target = event.target;
      let dataset = target.dataset;
      let { categoryname, category1id, category2id, category3id } = dataset;
      if (categoryname) {
        let location = {
          name: "search",
        };
        let query = {
          categoryName: categoryname,
        };
        if (category1id) {
          query.category1Id = category1id;
        } else if (category2id) {
          query.category2Id = category2id;
        } else {
          query.category3Id = category3id;
        }
        location.query = query;
        if (this.$route.params) {
          location.params = this.$route.params;
        }
        this.$router.push(location);
      }
    },
    removeKeyword() {
      this.keyword = "";
    },
  },
  computed: {
    ...mapState({
      catgrotlist: (state) => state.home.catgrotlist,
    }),
  },
};
</script>

<style lang="less" scoped>
.outerContainer {
  width: 100%;
  .topContainer {
    width: 100%;
    background-color: #f5f5f5;
    .topInsideContainer {
      font-size: 10px;
      display: flex;
      justify-content: space-between;
      width: 1200px;
      height: 28px;
      margin: 0 auto;
      line-height: 28px;
      // background-color: aqua;
      .topNav {
        display: flex;
        li {
          width: 100px;
          text-align: center;
          &.gift {
            .giftBox {
              display: none;
            }
          }
          &.sale {
            .saleBox {
              display: none;
            }
          }
          &.club {
            .clubBox {
              display: none;
            }
          }
          &.serve {
            .serveBox {
              display: none;
            }
          }
          &.iphone {
            .iphoneBox {
              display: none;
            }
          }
          &.iphone:hover {
            .iphoneBox {
              display: block;
              width: 100px;
              position: relative;
              left: -10px;
              top: -29px;
              box-sizing: border-box;
              .iphoneTop {
                width: 100px;
                background-color: #fff;
                border: 1px solid #aaa;
                position: absolute;
                border-bottom: none;
                z-index: 2;
                margin-top: 1px;
              }
              .insde {
                position: absolute;
                width: 180px;
                height: 180px;
                border: 1px solid #aaa;
                z-index: 1;
                top: 30px;
                left: -80px;
                img {
                  position: absolute;
                  left: 0;
                  top: 0;
                  right: 0;
                  bottom: 0;
                  margin: auto;
                  width: 165px;
                  height: 165px;
                }
              }
            }
          }
          &.club:hover {
            position: relative;
            .clubBox {
              width: 110px;
              position: absolute;
              left: -20px;
              top: 0;
              display: block;
              background-color: #fff;
              border: 1px solid #aaa;
              z-index: 1;
              display: flex;
              flex-direction: column;
              align-items: center;
              li {
                i {
                  font-size: 5px;
                  color: #f10180;
                }
              }
            }
          }
          &.sale:hover {
            position: relative;
            .saleBox {
              width: 110px;
              position: absolute;
              left: -20px;
              top: 0;
              display: block;
              background-color: #fff;
              border: 1px solid #aaa;
              z-index: 1;
              display: flex;
              flex-direction: column;
              align-items: center;
              li {
                i {
                  font-size: 5px;
                  color: #f10180;
                }
              }
            }
          }
          &.serve:hover {
            position: relative;
            .serveBox {
              width: 110px;
              position: absolute;
              left: -20px;
              top: 0;
              display: block;
              background-color: #fff;
              border: 1px solid #aaa;
              z-index: 1;
              display: flex;
              flex-direction: column;
              align-items: center;
              li {
                i {
                  font-size: 5px;
                  color: #f10180;
                }
              }
            }
          }
          &.gift:hover {
            position: relative;
            .giftBox {
              display: block;
              position: relative;
              left: -139px;
              top: 0;
              width: 390px;
              height: 460px;
              z-index: 99;
              border: 1px solid #aaa;
              background-color: #ffffff;
              p {
                width: 70%;
                margin: 0 auto;
              }
              .giftBoxBottom {
                display: flex;
                margin: 5px 25px;
                width: 80%;
                background: url("//shop.vipstatic.com/img/common/bg-hash-36387f12.png");
                line-height: 133px;
                img {
                  width: 133px;
                  height: 133px;
                }
              }
            }
          }
          .icondown-triangle {
            font-size: 5px;
            margin: 0 5px;
          }
          em {
            color: #e8e8e8;
            margin-left: 5px;
          }
        }
      }
    }
  }
  .indexContainer {
    width: 1200px;
    margin: 0 auto;
    .logoSearch {
      // background-color: yellow;
      height: 100px;
      display: flex;
      position: relative;
      .logo {
        img {
          width: 160px;
          height: 100px;
        }
      }
      .center {
        display: flex;
        li {
          width: 101px;
          line-height: 101px;
          font-size: 15px;
          i {
            color: #f10180;
            font-size: 21px;
            padding: 0 5px;
          }
        }
      }
      .right {
        position: absolute;
        right: 138px;
        bottom: 14px;
        display: flex;
        flex-direction: column;
        .topInput {
          display: flex;
          .searchInput {
            border: 2px solid #f10180;
            padding: 5px;
            font-size: 14px;
            color: black;
            outline: 0;
            width: 400px;
            height: 32px;
            box-sizing: border-box;
          }
          .mockbutton {
            width: 54px;
            height: 32px;
            background-color: #f10180;
            text-align: center;
            line-height: 32px;
            color: #fff;
            font-size: 20px;
          }
        }
        .bottomNav {
          margin-top: 5px;
          display: flex;
          li {
            height: 16px;
            padding: 0 10px;
            line-height: 16px;
            font-size: 10px;
            color: #9fb3c7;
            border-right: 1px solid #9fb3c7;
          }
        }
      }
    }
    .type-nav {
      border-bottom: 2px solid #e1251b;
      .container {
        width: 1200px;
        margin: 0 auto;
        display: flex;
        position: relative;
        .all {
          width: 210px;
          height: 45px;
          background-color: #f10180;
          line-height: 45px;
          text-align: center;
          color: #fff;
          font-size: 14px;
          font-weight: bold;
        }

        .nav {
          a {
            height: 45px;
            margin: 0 22px;
            line-height: 45px;
            font-size: 16px;
            color: #333;
          }
        }
        .sort {
          position: absolute;
          left: 0;
          top: 45px;
          width: 210px;
          height: 520px;
          position: absolute;
          background: #f10180;
          // text-align: center;
          z-index: 999;
          &.sort-enter {
            opacity: 0;
            height: 0;
          }
          &.sort-enter-to {
            opacity: 1;
            height: 461px;
          }
          &.sort-enter-active {
            transition: all 0.5s;
          }

          .all-sort-list2 {
            .item {
              &.active {
                background-color: #fff;
                a {
                  color: #f10180;
                }
              }
              h3 {
                line-height: 30px;
                font-size: 14px;
                font-weight: 400;
                overflow: hidden;
                padding: 0 20px;
                margin: 0;

                a {
                  color: #fff;
                }
              }

              .item-list {
                display: none;
                position: absolute;
                width: 734px;
                min-height: 460px;
                background: #fff;
                left: 210px;
                border: 1px solid #ddd;
                top: 0;
                z-index: 9999 !important;

                .subitem {
                  float: left;
                  width: 650px;
                  padding: 0 4px 0 8px;

                  dl {
                    border-top: 1px solid #eee;
                    padding: 6px 0;
                    overflow: hidden;
                    zoom: 1;

                    &.fore {
                      border-top: 0;
                    }

                    dt {
                      float: left;
                      width: 54px;
                      line-height: 22px;
                      text-align: right;
                      padding: 3px 6px 0 0;
                      font-weight: 700;
                    }

                    dd {
                      float: left;
                      width: 415px;
                      padding: 3px 0 0;
                      overflow: hidden;

                      em {
                        float: left;
                        height: 14px;
                        line-height: 14px;
                        padding: 0 8px;
                        margin-top: 5px;
                        border-left: 1px solid #ccc;
                      }
                    }
                  }
                }
              }

              &:hover {
                .item-list {
                  display: block;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
